<!--租客签约对话框-->
<template>
	<a-modal v-bind="options">
		<a-tabs v-model:active-key="type" v-bind="tabOptions" @change="handler">
			<template #leftExtra>
				<a-typography-title :level="5" v-color="{color: 'primary'}">租客签约</a-typography-title>
			</template>
			<template v-if="store.hasPermissions(['mk_contract_tenant_tjzkht'])">
				<a-tab-pane
					:disabled="['2', '4'].includes(props.approvalStatus as string) || props.reletId || props.supplementaryId || props.id || props.isEnterPriseExchange"
					key="renter"
					tab="&nbsp;&nbsp;个人合同&nbsp;&nbsp;">
					<renter-sign
						:isConfiguration="props.isConfiguration"
						:is-resubmit="isResubmit"
						:contract="contract"
						@success="success"
						:isChooseProcedureFee="props.isChooseProcedureFee" />
				</a-tab-pane>
				<!-- :disabled="['2', '4'].includes(props.approvalStatus as string) || props.reletId || props.supplementaryId"  -->
			</template>
			<!-- <a-tab-pane key="agreement" tab="&nbsp;&nbsp;协议合同&nbsp;&nbsp;">
				<agreement-contract :isShow="records.agreement" v-model:visible="visibles" @success="success" />
			</a-tab-pane> -->
			<template v-if="store.hasPermissions(['mk_contract_charter_party_tjbzht'])">
				<a-tab-pane
					:disabled="[2, 4].includes(props.approvalStatus as number) || props.contract?.contractId || props.contract?.id || props.contract?.houseId || props.contract?.renterInfo"
					key="charter"
					tab="&nbsp;&nbsp;企业合同&nbsp;&nbsp;">
					<charter-sign
						:resubmitId="props.resubmitId"
						v-model:visible="visibles"
						:id="props.id"
						@success="success"
						:reletId="props.reletId"
						:reletIds="props.reletIds"
						:supplementaryId="props.supplementaryId"
						:isEnterPriseExchange="props.isEnterPriseExchange"
						:contract="props.contract" />
				</a-tab-pane>
			</template>
		</a-tabs>
		<template #footer />
	</a-modal>
	<!-- <renter-sign-dialog v-model:visible="visibles.contract" :contract="contractData" v-model:isChooseProcedureFee="isChooseProcedureFee" @success="renterSignSuccess" /> -->
</template>

<script lang="ts" setup>
	import {reactive, toRef, ref, watch} from 'vue'
	import renterSign from '@/components/contract/signing/renter-sign.vue'
	import charterSign from '@/components/contract/signing/charter-sign.vue'
	import {useStore} from '@/store'
	import {RenterContract} from '@/interface/contract'
	import emitter from 'yuxin-base/src/utils/bus'
	import AgreementContract from '@/components/contract/contract-detail-dialog/charter-contract/agreement-contract.vue'

	const store = useStore()

	const props = defineProps<{
		visible: boolean
		signingType?: string
		value?: any
		contract?: RenterContract
		id?: string
		resubmitId?: string | null
		// 续签上一份合同ID
		reletId?: string | null
		reletIds?: object | null
		// 补签原合同ID
		supplementaryId?: string | null
		isChooseProcedureFee?: any
		contractId?: string
		//是否是重新提交
		isResubmit?: boolean
		bizId?: string
		approvalStatus?: string | null | number
		isConfiguration?: boolean
		/** 是否企业合同换房 */
		isEnterPriseExchange?: boolean
	}>()

	const visibles = ref(true)
	const type = ref(props.signingType)

	const records = reactive({
		renter: false,
		agreement: false,
		charter: false
	})

	const emits = defineEmits(['update:visible', 'close', 'success'])
	const options = reactive({
		width: '80vw',
		header: null,
		centered: true,
		keyboard: false,
		maskClosable: false,
		destroyOnClose: true,
		class: 'signing-dialog',
		visible: toRef(props, 'visible'),
		onCancel() {
			emitter.emit('refreshWaiting')
			emits('update:visible', false)
			setTimeout(() => emits('close'), 100)
		}
	})

	const tabOptions = reactive({
		centered: true,
		class: 'signing-tabs',
		destroyInactiveTabPane: true
	})

	const success = (type = 1) => {
		console.log('🚀 ~ file: signing-dialog.vue:129 ~ success ~ type:', type)
		options.onCancel()

		if (type === 2) {
			emits('success', type)
			return
		}

		emits('success')
	}

	watch(
		() => props.visible,
		(newVal: boolean) => {
			if (newVal) {
				type.value = props.signingType
			}
		}
	)

	const handler = () => {
		// if ([2, 4].includes(props.approvalStatus as number) || props.contract?.contractId || props.contract?.id || props.contract?.houseId) {
		// 	type.value = 'renter'
		// 	return message.error('转租、换房、续租、重新提交不允许切换合同类型')
		// }
		// if (['2', '4'].includes(props.approvalStatus as string) || props.reletId || props.supplementaryId) {
		// 	type.value = 'charter'
		// 	return message.error('补签、续租、重新提交不允许切换合同类型')
		// }
	}
</script>

<style lang="less">
	.signing-dialog {
		max-width: 1400px;

		.ant-modal-body {
			padding: 0;
			overflow: auto;
			min-height: 600px;
			max-height: 1000px;
			height: calc(100vh - 100px);

			.ant-tabs,
			.ant-tabs-content {
				height: 100%;
			}

			.signing-tabs {
				> .ant-tabs-nav {
					padding: 6px 12px 0;
					margin-bottom: 0;
					background: rgba(0, 0, 0, 0.02);

					> .ant-tabs-nav-wrap {
						margin-left: -65px;
					}
				}

				.ant-tabs-tabpane {
					padding: 0 24px;
					overflow: auto;
				}
			}
		}
	}
	.renter-sign-dialog {
		.ant-form-item {
			margin-bottom: 16px;

			label[for='form_item_beginTime'] {
				display: flex;

				.display-flex {
					flex: 1;
					justify-content: space-around;
				}
			}
		}

		.custom-radio-group {
			.ant-space {
				display: flex;

				.ant-space-item {
					flex: 1;
				}
			}

			.ant-radio-button-wrapper {
				height: 96px;
				display: block;

				.ant-typography {
					margin-bottom: 6px;
				}
			}
		}

		.template-select-wrapper {
			.ant-form-item-control {
				flex-direction: row;
				align-items: center;
				gap: 16px;

				.ant-select-selection-search {
					left: 0;
				}

				.ant-form-item-extra {
					color: @warning-color;
					font-size: @font-size-sm;
				}
			}

			.ant-select {
				width: 160px;

				.ant-select-selector {
					padding: 0;
					font-size: @font-size-sm;
				}
			}
		}

		.month-quick-radio-group {
			.ant-radio-button-wrapper {
				padding: 0 9px;
			}
		}

		.ant-input-number-group-addon {
			background: #fff;
			color: @text-color;
		}

		.edit-table-row {
			.ant-input,
			.ant-select-selector {
				padding: 0;
				border: none;
			}

			.ant-select,
			.ant-input-number {
				width: 100%;
			}

			.ant-radio-wrapper:last-child {
				margin-right: 0;
			}
		}
	}
</style>
